<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../../../subassembly/visJs/vis.min.css">
  <link rel="stylesheet" href="../../../subassembly/visJs/vis-reset.css">
  <link rel="stylesheet" href="../../../../css/animate/animate.css">
  <link href="../../../subassembly/layui/css/layui.css" rel="stylesheet">
  <link href="../../../subassembly/tree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
  <link href="checkboxGroup.css" rel="stylesheet">
  <link href="viewDetail.css" rel="stylesheet">
  <script src="../../../subassembly/common/jquery-3.5.1.min.js"></script>
  <script src="../../../subassembly/layui/layui.js"></script>
  <script src="../../../subassembly/visJs/vis.min.js"></script>

  <script src="../../../subassembly/tree/js/jquery.ztree.core.min.js"></script>
  <script src="../../../subassembly/tree/js/jquery.ztree.exedit.min.js"></script>
  <script type="text/javascript" src="../../../subassembly/tree/js/jquery.ztree.excheck.js"></script>
  <script type="text/javascript" src="../../../subassembly/tree/js/jquery.ztree.exhide.js"></script>
  <script type="text/javascript" src="../../../subassembly/tree/js/fuzzysearch.js"></script>

  <script src="../../../subassembly/echarts/echarts.min.js" type="text/javascript"></script>
  <script src="../../../subassembly/common/common.js" type="text/javascript"></script>
  <script src="../../../subassembly/common/underscore-min.js" type="text/javascript"></script>

  <script src="viewDetail.js" type="text/javascript"></script>
</head>
<body>
<div style="width: 100%; height: 100vh" id="myTopo">

</div>
<script>
  var nodesConfig = "";
  var edgesConfig = "";
  var network = null;
  function destroy() {
    if (network !== null) {
      network.destroy();
      network = null;
    }
  }
  var options = {
    locale: 'cn',
    layout: {
      hierarchical: false
    },
    interaction: {
      // 启用操作按钮
      navigationButtons: true,
      keyboard: true,
      /*启用鼠标聚焦事件*/
      hover: true
    },
    // 不启用节点操作
    manipulation: {
      enabled: false,
      initiallyActive: true,
      addNode: false,
      addEdge: false,
      editEdge: false,
      deleteNode: false,
      deleteEdge: false,
      controlNodeStyle: {}
    },
    physics: {
      enabled: true,
      stabilization: false,
      barnesHut: {
        gravitationalConstant: -108000
      },
      repulsion: {
        nodeDistance: 100, //(默认100，排斥的影响范围)
      }
    },
    nodes: {
      /*节点字体位置*/
      shape: "dot",
      /*缩小到一定程度才能查看字体*/
      /*节点(图标)大小*/
      size: 14,
      font: {
        /*全局设置拓扑图字体*/
        color: '#75AFFF',
        face: 'arial',
      }
    },
    edges: {
      /*全局设置箭头风格*/
      arrows: {
        to: {enabled: true, scaleFactor: 0.5, type: 'arrow'},
      },
      font: {
        color: '#a0baff',
        size: 0, // px
      },
      color: {color: "#0ca361", opacity: 0.68},
      shadow: false,
      /*全局设置线条虚线风格*/
      dashes: false,
      labelHighlightBold: false,
      arrowStrikethrough: false,//关系线与节点处无缝隙
    }
  };
  function draw() {
    destroy();
    // create a network
    var container = document.getElementById("myTopo");
    var data = {
      nodes: nodesConfig,
      edges: edgesConfig,
    };
    network = new vis.Network(container, data, options);
  }

  // 默认加载
  $(function () {
    nodesConfig = new vis.DataSet();
    edgesConfig = new vis.DataSet();
    draw();
    nodesConfig.clear();
    edgesConfig.clear();

    var nodes = [];
    var edges = [];
    var treeJson = [
      {id: "11-13", name: "CRM运维平台", open: false, x: 100, y: 800},
      {id: "11-14", name: "BOMC", open: false},
      {id: "11-15", name: "安全管理系统", open: false},
      {id: "11-16", name: "BOSS", open: false},
      {id: "11-12", name: "电渠平台", open: false},
      {id: "11-10", name: "管理信息系统", open: false},
      {id: "11-11", name: "大数据运营平台", open: false},
      {id: "11-13-10", pId: "11-13", name: "营业厅WEB集群", x: 450, y: 0, isHidden: true},
      {id: "11-13-11", pId: "11-13", name: "管理应用WEB集群", x: 450, y: 100, isHidden:true},
      {id: "11-13-12", pId: "11-13", name: "营业厅WEB集群（政企）", x: 450, y: 200, isHidden:true},
      {id: "11-13-13", pId: "11-13", name: "互联网WEB集群", x: 450, y: 300, isHidden:true},
      {id: "11-13-14", pId: "11-13", name: "能力开放平台集群", x: 450, y: 400, isHidden:true},
      {id: "11-13-15", pId: "11-13", name: "服务集成平台集群", x: 450, y: 500, isHidden:true},
      {id: "11-13-16", pId: "11-13", name: "其它接口(remote/ws)", x: 450, y: 600, isHidden:true},
      {id: "11-13-17", pId: "11-13", name: "能力中心集群", x: 450, y: 700, isHidden:true},
      {id: "11-13-18", pId: "11-13", name: "后台进程服务器", x: 450, y: 800, isHidden:true},
      {id: "11-13-19", pId: "11-13", name: "缓存-产品/CAU/权限", x: 450, y: 900, isHidden:true},
      {id: "11-13-20", pId: "11-13", name: "redis缓存-统一session/结果集缓存", x: 450, y: 1000, isHidden:true},
      {id: "11-13-21", pId: "11-13", name: "搜索中心/分布式配置/消息中间件", x: 450, y: 1100, isHidden:true},
      {id: "11-13-22", pId: "11-13", name: "产品配置、SSO单点登录", x: 450, y: 1200, isHidden:true},
      {id: "11-13-23", pId: "11-13", name: "服务治理管理平台", x: 450, y: 1300, isHidden:true},
      {id: "11-13-24", pId: "11-13", name: "CRM-DNS", x: 450, y: 1400, isHidden:true},
      {id: "11-13-25", pId: "11-13", name: "CBOSS", x: 450, y: 1500, isHidden:true},
      {id: "11-13-25-11", pId: "11-13-25", name: "CBOSSweb前台", x: 800, y: 1500, isHidden:true},
      {id: "11-13-25-12", pId: "11-13-25", name: "CBOSSAPP应用", x: 800, y: 1400, isHidden:true},
      {id: "11-13-25-13", pId: "11-13-25", name: "CBOSS数据库", x: 800, y: 1300, isHidden:true},
      {id: "11-13-25-14", pId: "11-13-25", name: "CBOSS备用", x: 800, y: 1200, isHidden:true},
      {id: "11-13-26", pId: "11-13", name: "云化服务平台", x: 450, y: 1600, isHidden:true}
    ]
    for (var i = 0; i < treeJson.length; i++) {
      var item = treeJson[i];
      if (item.id.indexOf("11-13") != 0) {
        continue;
      }
      if (item.pId) {
        edges.push({
          from: item.pId,
          to: item.id
        })
      }
      var obj = {id: item.id, label: item.name};
      nodes.push(obj)
    }
    network.setOptions(options);
    nodesConfig.add(nodes);
    edgesConfig.add(edges);
  })
</script>
</body>
</html>
